<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">基本信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">姓名</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.personName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.personName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">手机号码</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.mobile || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.mobile || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.idCard || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.idCard || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">人员标签</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.tagNameList.join(',') || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.tagNameList.join(',') || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证照片</div>
              <div class="value common-value click-color cursor" @click="werImg('minImg')">
                点击查看身份证照片
                <img
                  id="minImg"
                  :src="`${imgPrefix + details.idCardUrl}`"
                  :data-original="`${imgPrefix + details.idCardUrl}`"
                />
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">人脸照片</div>
              <div class="value common-value click-color cursor" @click="werImg('minImg2')">
                点击查看人脸照片
                <img
                  id="minImg2"
                  :src="`${imgPrefix + details.personImage}`"
                  :data-original="`${imgPrefix + details.personImage}`"
                />
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">现居地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.currentAddress || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.currentAddress || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">户籍地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.residenceAddress || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.residenceAddress || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">从业经历</div>
        </div>

        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template #workTime="records">
            <a-tooltip placement="top">
              <template #title>
                {{ records.entryTime.slice(0, 10) || '暂无' }}
                - {{ records.departTime ? records.departTime.slice(0, 10) : '至今' }}
              </template>
              {{ records.entryTime.slice(0, 10) || '暂无' }}
              - {{ records.departTime ? records.departTime.slice(0, 10) : '至今' }}
            </a-tooltip>
            <span> </span>
          </template>
        </a-table>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods, JeecgListMixin],
  data() {
    return {
      url: {
        list: '/police/jurisdiction/page',
      },
      publicVisible: false,
      details: {},
      imgPrefix: '',
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '单位名称',
          dataIndex: 'companyMessageName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '职位名称',
          align: 'center',
          dataIndex: 'position_dictText',
          ellipsis: true,
        },
        {
          title: '工作时间',
          align: 'center',
          // dataIndex: 'idCard',
          scopedSlots: { customRender: 'workTime' },
          ellipsis: true,
        },
      ],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
    }
  },

  methods: {
    async show(records) {
      this.publicVisible = true
      this.details = records
      this.queryParams.idCard = records.idCard
      this.getRecord()
    },

    async getRecord(params) {
      let { result } = await getAction('/hotel/work_person/page', this.queryParams)
      this.dataSource = result.records
      this.ipagination.total = result.total
    },

    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.getRecord()
    },

    handleOk() {
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  // height: 0 !important;
}
img {
  display: none;
}
</style>
